<template>
  <div class="gl-fw">
    <div class="select-box">
      <iview-select class="select-wrapper" size='large' placeholder='时间' v-model="dateTime" @on-change="changDate">
        <iview-op value='1'>全部</iview-op>
        <iview-op value='2'>本月</iview-op>
        <iview-op value='3'>本周</iview-op>
        <iview-op value='4'>今天</iview-op>
      </iview-select>
      <iview-select class="select-wrapper" size='large'  placeholder='区域' v-model="syType" @on-change="changCity" v-if="isCountry01">
        <iview-op value='1'>全部</iview-op>
        <iview-op :value='item.id' v-for="(item,index) in list.arr" :key="index">{{item.city}}</iview-op>
        <!--<iview-op value='3'>活动卡</iview-op>-->
      </iview-select>
      <iview-select class="select-wrapper" size='large'   placeholder='区域' v-model="syType" @on-change="changQy" v-if="isQy">
        <iview-op value='1'>全部</iview-op>
        <iview-op :value='item.id' v-for="(item,index) in qy_list.arr" :key="index">{{item.qy_name}}</iview-op>
        <!--<iview-op value='3'>活动卡</iview-op>-->
      </iview-select>
    </div>
    <div class="shouyi-table">
      <div class="shouyi-title" v-if="isCountry">
        <div class="item">合计</div>
        <!--<div class="item">未结 1000</div>-->
        <!--<div class="item">已结 200</div>-->
        <div class="item">收益 {{list.zsy}}</div>
      </div>
      <div class="shouyi-title" v-if="isCity">
        <div class="item">合计</div>
        <!--<div class="item">未结 1000</div>-->
        <!--<div class="item">已结 200</div>-->
        <div class="item">收益 {{qy_list.zsy}}</div>
      </div>
      <div class="shouyi-title" v-if="isShop">
        <div class="item">合计</div>
        <!--<div class="item">未结 1000</div>-->
        <!--<div class="item">已结 200</div>-->
        <div class="item">收益 {{shop_list.zsy}}</div>
      </div>
      <div class="shouyi-item" v-for="(item,index) in list.arr" :key="index" v-if="isCountry">
        <div class="item">{{item.city}}</div>
        <div class="item">收益 {{item.y_money}}</div>
      </div>
      <div class="shouyi-item" v-for="(item,index) in qy_list.arr" :key="index" v-if="isCity">
        <div class="item">{{item.qy_name}}</div>
        <div class="item">收益 {{item.y_money}}</div>
      </div>
      <div class="shouyi-item" v-for="(item,index) in shop_list.arr" :key="index" v-if="isShop">
        <div class="item">{{item.shop_name}}</div>
        <div class="item">收益 {{item.yjs}}</div>
      </div>
    </div>


  </div>
</template>

<script>
  import betterScroll from '@/components/betterScroll';

  import bigTitle from "@/components/bigTitle/index";
  import checkLogin from '@/mixins/checkLogin.js';
  import {
    ViewBox,
    XButton,
    Group,
    Cell
  } from "vux";
  import {
    Popup
  } from "vue-ydui/dist/lib.px/popup";
  export default {
    data() {
      return {
        isDisplay:true,
        syType:1,
        dateTime:1,
        start_time: this.$moment('2018-01-01').unix(),
        end_time: this.$moment().unix(),
        list:[],
        qy_list:[],
        isCountry:false,
        isCity:false,
        city_id:'',
        isQy:false,
        isShop:false,
        shop_list:[],
        qy_id:'',
        isCountry01:false
      };
    },
    created() {
      // this.get_country_list();
      this.dl_level();
    },
    methods: {
      get_country_list(){
        console.log('股东代理')
        this.$axios.get('Api/Bb/gd_see_city',
          {params:{
              dl_id:this.userinfo.dl[0].id
            }
          }).then(({data})=>{
          console.log(data);
          this.list = data;
          this.isCountry = true;
          this.isCity = false;
          this.isShop = false;
        })
      },
      get_city_list(){
        console.log('2级代理')
        this.$axios.get('Api/Bb/qy_see_qy',{
          params:{
            city_id:this.city_id,
            dl_jb:this.userinfo.dl[0].dl_jb
          }
        }).then(({data}) =>{
          console.log('quyu',data);
          this.qy_list = data;
          this.isCountry = false;
          this.isCity = true;
          this.isShop = false;
        })
      },
      get_shop_list(){
        console.log('3级');
        this.$axios.get('/Api/Bb/qy_see_shop',{
          params:{
            qy_id:this.qy_id,
            dl_jb:3
          }
        }).then(({data})=>{
          this.shop_list = data;
          this.isCountry = false;
          this.isCity = false;
          this.isShop = true;
        })
      },
      //判断代理级别
      dl_level(){
        console.log(this.userinfo.dl[0]);
        if(this.userinfo.dl[0].dl_jb == 1){
          //股东代理 数据显示时 isCity = false   isShop = false
          this.isCountry01 = true;
          this.isCountry = true;
          this.isQy = false;
          this.isShop = false;
          this.get_country_list();
        }else if(this.userinfo.dl[0].dl_jb == 2){
          //市级代理   isCountry = false    isShop = false
          this.isQy = true;
          this.city_id = this.userinfo.dl[0].city_id;
          this.get_city_list();
        }else if(this.userinfo.dl[0].dl_jb == 3){
          //区域代理
          this.qy_id = this.userinfo.dl[0].qy_id;
          this.get_shop_list();

        }
      },
      changType(val){
        console.log(val);
      },
      changCity(value){
        console.log(value);
        this.city_id = value;
        if(value==1){
          this.get_country_list();
        }else{
          this.$axios.get('Api/Bb/qy_see_qy',{
            params:{
              city_id:this.city_id,
              dl_jb:this.userinfo.dl[0].dl_jb
            }
          }).then(({data}) =>{
            console.log('quyu',data);
            this.qy_list = data;
            this.isCity = true;
            this.isCountry = false;
          })
        }
      },
      changQy(val){
        // console.log(val);
        if(val==1){
          this.dl_level();
          this.isShop = false;
          this.isCity = true;
        }else{
          console.log(val);
          this.$axios.get('Api/Bb/qy_see_shop',{
            params:{
              qy_id:val,
              dl_jb:3
            }
          }).then(({data})=>{
            this.shop_list = data;
            console.log('shop',data)
            this.isShop = true;
            this.isCity = false;
            this.isCountry01 = false;
          })
        }
      },
      changDate(val){
        if(val==1){
          this.start_time = this.$moment('2018-01-01').unix();
        }else if(val==2){
          this.start_time = this.$moment().startOf('month').unix();
        }else if(val==3){
          this.start_time = this.$moment().startOf('week').unix();
        }else{
          this.start_time = this.$moment().startOf('day').unix();
        }
        console.log(this.start_time);
        this.end_time = this.$moment().unix();
      }
    },
    computed: {

    },
    mixins: [checkLogin],
    components: {
      ViewBox,
      bigTitle,
      XButton,
      Popup,
      Group,
      Cell
    }
  };

</script>

<style lang='scss'>
  .gl-fw {
    height: 100%;
    display: flex;
    flex-direction: column;
    .select-box{
      margin-top: 0.2rem;
      width: 100%;
      position: fixed;
      top:0;
      left:0;
      background: #fff;
      /*display: flex;*/
      height:1.1rem;
      flex-direction: row;
      border-bottom:1px solid #969896;
      /*padding-bottom:0.2rem;*/
      .select-wrapper{
        width:3rem;
        margin-left: 1.2rem;
        border:none;
        background: #fff;
      }
    }
    .shouyi-table{
      .shouyi-title{
        display: flex;
        flex-direction: row;
        height:1rem;
        line-height: 1rem;
        background: #50aaff;
        margin-top: 1.5rem;
        .item{
          /*width: 25%;*/
          flex: 1;
          box-sizing: border-box;
          padding-left:0.5rem;
          /*text-align: center;*/
        }
      }
      .shouyi-item{
        height:1rem;
        line-height: 1rem;
        display: flex;
        flex-direction: row;
        border-bottom:1px solid #969896;
        .item{
          /*width: 25%;*/
          flex:1;
          box-sizing: border-box;
          padding-left:0.5rem;
          overflow: hidden;
        }
      }
    }
  }

</style>
